<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<link rel="stylesheet" href="./font/iconfont.css" />
    <title>(测试)</title>
    <style>
		*{
			padding: 0;
			margin: 0;
		}
        .box {
            height: 300px;
            width: 300px;
            margin: 100px 0 0 400px ;
            position: relative;
			overflow: hidden;
        }
		.left,.right{
			cursor: pointer;
		}
		.left{
			position: absolute;
			left: 10px;
			top: 50%;
			width: 25px;
			height: 25px;
			border-radius: 50%;
			background-color: ghostwhite;
		}
		.right{
			position: absolute;
			right: 10px;
			top: 50%;
			width: 25px;
			height: 25px;
			border-radius: 50%;
			background-color: ghostwhite;
		}
        ul {
            height: 300px;
            width: calc(100% * 5);
            display: flex;
            list-style: none;
            position: absolute;
			/* overflow: hidden; /* 确保溢出内容被隐藏 */ 
            top: 0;
            left: -300px;
			z-index: -9;
			/* transition: transform 0.6s linear; */ /* 添加平滑过渡效果 */
        }
        li {
            width: 300px;
            height: 300px;
			flex-shrink: 0; /* 防止 li 缩小 */
        }
		li:nth-child(1) {
		    background-color: green;
		}
        li:nth-child(2) {
            background-color: yellow;
        }
        li:nth-child(3) {
            background-color: red;
        }
        li:nth-child(4) {
            background-color: green;
        }
		li:nth-child(5) {
		    background-color: yellow;
		}
/* 		@keyframes leftAnmaition {
		            0% {
		                transform: translateX(0);
		            }
		            100% {
		                transform: translateX(-300px); 
		            }
		        }
		.leftAnmaition{
			animation: leftAnmaition .6s  linear 1 forwards;;
		} */
    </style>
</head>
<body>

    <div class="box">
		<div class="left">
			<i class="iconfont icon-fanhui"></i>
		</div>
		<div class="right">
			<i class="iconfont icon-jinru"></i>
		</div>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
<!-- 	<script>
		let ans = 2;
		const ul = document.querySelector('ul')
		const  left = document.querySelector('.left')
		const right = document.querySelector('.right')
		right.addEventListener('click',()=>{
			ans = (ans-1 )%5
			ul.style.transform = `translateX(${(ans) * 300}px)`;
			
			// ul.classList.remove('leftAnmaition')
			//  // 强制回流，重置动画
			//  void ul.offsetWidth;
			// ul.classList.add('leftAnmaition')
			// ul.style.transform = `translateX(${ans*300})`; // 设置起始状态
		})
		left.addEventListener('click',()=>{
			ans = (ans+1 )%5
			ul.style.transform = `translateX(${(ans-2) * 300}px)`;
			
		})
	</script> -->
    <script>
        let ans = 1;
        const ul = document.querySelector('ul');
        const left = document.querySelector('.left');
        const right = document.querySelector('.right');
        const boxWidth = 300; // Assuming each box width is 300px
        let flag = true;

        // 克隆第一个和最后一个元素
        let first = ul.children[0].cloneNode(true);
        let last = ul.children[ul.children.length - 1].cloneNode(true);

        // 添加 CSS 类
        first.classList.add('cloned');
        last.classList.add('cloned');

        // 分别将它们放在前面和后面
        ul.prepend(last);
        ul.appendChild(first);
		//动画函数封装
        function animate(obj, target, callback) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                var step = (target - obj.offsetLeft) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (obj.offsetLeft == target) {
					// console.log(Date.now());
                    clearInterval(obj.timer);
                    callback && callback();
                }
                obj.style.left = obj.offsetLeft + step + 'px';
            }, 15);
        }
		//防抖函数
        function debounce(func, wait) {
            let timeout;
            return function(...args) {
                const context = this;
                clearTimeout(timeout);			//存在定时器就关闭
                timeout = setTimeout(() => func.apply(context, args), wait);	//历用apply改变this指向
            };
        }
        const handleRightClick = debounce(() => {
            if (flag) {
                flag = false;
                if (ans == ul.children.length - 1) {
                    ul.style.left = '-300px';
                    ans = 1;
                }
                ans++;
                animate(ul, -ans * boxWidth, function() {
                    flag = true;
                });
            }
        }, 300);

        const handleLeftClick = debounce(() => {
            if (flag) {
                flag = false;
                if (ans == 0) {
                    ul.style.left = `-${(ul.children.length - 1) * 300}px`;
                    ans = ul.children.length - 2;
                }
                ans--;
                animate(ul, -ans * boxWidth, function() {
                    flag = true;
                });
            }
        }, 300);
        right.addEventListener('click', handleRightClick);
        left.addEventListener('click', handleLeftClick);
    </script>
</body>
</html>

